import React from 'react'
import Group from './group'

class ImageListItem extends React.Component {
  render() {
    const { active } = this.props; 
    const cname = active ? "label-glrItem label-glrItem-active" : "label-glrItem";
    return (
      <div 
        className={cname}
        style={{ width: "75px", height: "75px" }} 
      >
        <img 
          style={{ width: "64px", height: "64px", marginTop: "5px", marginLeft: "5px", borderRadius: "8px" }}
        src="https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1533529430331&di=0fa7558b064c6ea1dd7b436c76e52fa7&imgtype=0&src=http%3A%2F%2Fpic.qiantucdn.com%2F58pic%2F25%2F93%2F28%2F587fb7e5a17a3_1024.jpg"
      />
      </div>
    );
  }
}

class ImageListButton extends React.Component {
  state = { hover: false };
  handleMouseInter = () => this.setState({ hover: true })
  handleMouseLeave = () => this.setState({ hover: false })
  render() {
    const { hover } = this.state;
    const { children,img } = this.props;
    const classString = hover === false ? "" : "label-glrBtnHover"
    return (
      <div 
        className={classString}
        onMouseEnter={() => this.handleMouseInter()}
        onMouseLeave={() => this.handleMouseLeave()} 
      >
        <img src={img}/>
      </div>
    );
  }
}

export default class ImageListView extends React.Component {
  render() {
    return (
      <Group title="Image List">
        <div className="label-block label-blSepItems label-h45">
          <div className="label-item label-glrBarItem" style={{ overflow: "hidden" }}>
            <div className="label-glrButtons">
              <ImageListButton img="https://png.icons8.com/material/1600/double-up.png" />
              <ImageListButton img="https://png.icons8.com/material/1600/chevron-up.png" />
              <ImageListButton img="https://png.icons8.com/material/1600/chevron-down.png" />
              <ImageListButton img="https://png.icons8.com/material/2x/double-down.png" />
            </div>
            <div className="label-glrBarContainer" style={{ position: "relative" }}>
              <div className="label-glrMainDiv label-glrImgTop" style={{ top: " 0px", position: "relative" }}>
                <ImageListItem />
                <ImageListItem active />
                <ImageListItem />
                <ImageListItem />
                <ImageListItem />
              </div>
            </div>
          </div>
        </div>
      </Group>
    );
  }
}